.box {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background-color: rgb(62, 182, 122);
    transition: 0.5s;
    float: left;
    margin: 20px
}

.container {
    width: 600px;
    height: 600px;
    border: 1px solid black;
    position: relative;
}

.box:nth-child(2):hover {
    /* 不会脱离文档流 */
    transform: translate(300.5px, 250px);
    /* height: 400px; */
    /* position: absolute;
    left: 300px;
    top: 300px; */
}

.box:nth-child(3):hover {
    transform: rotateX(50deg);
}

.box:nth-child(4):hover {
    transform: rotateY(50deg);
}

.box:nth-child(5) {
    transform-origin: 400px 400px;
    transition-duration: 5s;
}


/* body:hover .box:nth-child(5) {
    transform: rotateZ(360deg);
} */

.box:nth-child(6):hover {
    /* transform-origin: 400px 400px; */
    transform: scale(1.2)
    /* transition-duration: 5s; */
}

.box:nth-child(7):hover {
    transform: skew(40deg, 60deg)
}

.box:nth-child(8):hover {
    transform: translateX(50px) scale(1.1) rotateZ(20deg)
}

.img-box {
    height: 386px;
    width: 440px;
    border: 1px solid red;
    margin: 50px;
    overflow: hidden;
}

.img-box:hover img {
    transform: scale(1.1);
}

.img-box img {
    width: 100%;
    transition: 0.3s
}

.bottom {
    background-image: url(http://www.517lppz.com/themes/cn/default/assets/images/active_bg.png);
    height: 50px;
    background-size: cover;
    text-align: center;
    line-height: 50px;
    font-size: 1.4em;
    transition: 0.3s
}

.img-box:hover .bottom {
    transform: translateY(-60px);
}

.cube {
    width: 200px;
    height: 200px;
}


/* .td-cotainer {
    width: 200px;
    height: 200px;
    background-color: rgb(226, 201, 88);
    position: relative;
}

.face {
    width: 200px;
    height: 200px;
    background-color: rgb(92, 228, 92);
    position: absolute;
    top: 0;
    left: 0;
    transition: 1s
}

.td-cotainer1 {
    width: 200px;
    height: 200px;
    background-color: rgb(226, 201, 88);
    position: relative;
    transform-style: preserve-3d;
}

.face1 {
    width: 200px;
    height: 200px;
    background-color: rgb(92, 228, 92);
    position: absolute;
    top: 0;
    left: 0;
    transition: 1s
}

.face1:hover {
    transform: rotateY(30deg) rotateX(60deg)
}

.face:hover {
    transform: rotateY(30deg) rotateX(60deg)
} */

.cube {
    width: 800px;
    height: 800px;
    transform-style: preserve-3d;
    background-color: rgb(189, 190, 148);
}